<template>
  <div class="layout" style="display: flex;flex-direction: column">
    <load :state="loading"></load>
    <!--<picker-date-ym @getDate="getDate" ref="datePicker"></picker-date-ym>-->
    <div class="header">
      <div class="container"
           style="display: flex;flex-direction: column;justify-content: center;align-items: flex-start;margin-left: 10px">
        <span class="time" v-text="resp.time"></span>
        <span class="history" v-text="resp.history"></span>
      </div>
      <div style="flex: 1"></div>
    </div>
    <!--style="margin-top: 10px" 是为了隐藏顶部  之后删掉-->
    <van-list
      class="list-view"
      v-model="gettingMore"
      :finished="noMoreData"
      @load="getMore">
      <item-withdraw-history v-for="(item,index) in resp.historyItems" :key="index"
                             :avatar="item.avatar"
                             :title="item.title" :time="item.time" :money="item.money"
                             @click.native="handleItemClick(item)">
      </item-withdraw-history>
    </van-list>
    <div class="empty-txt" v-if="noMoreData">敬请期待更多产品</div>
  </div>
</template>

<script type="text/ecmascript-6">
  import Public from '@/assets/js/public';
  import ItemWithdrawHistory from '../../components/user/ItemWithdrawHistory';
  import BottomSheet from '../../components/common/BottomSheet';
  import Types from '../../pages/user/WithdrawType';
  import PickerDateYm from '../../components/user/PickerDateYM';
  import Load from '../../components/common/load/load';

  export default {
    data() {
      return {
        page: 0,
        loading: false,
        gettingMore: false,
        noMoreData: false,
        showBottomSheet: false,
        checkedType: Types.All,
        // hasMore: true,
        resp: {
          time: new Date().getFullYear() + '年' + (new Date().getMonth() + 1) + '月' + new Date().getDate() + '号',
          // history: 'test',
          historyItems: []
        }
      };
    },
    components: {Load, PickerDateYm, BottomSheet, ItemWithdrawHistory},
    methods: {
      getIcon(icon) {
        return Public.iconImg + icon + '.svg';
      },
      setTime() {
        // console.log('setTime', 'click');
        // todo 改时间
        this.$refs.datePicker.show();
      },
      setSearchType() {
        this.showBottomSheet = true;
      },
      getMore() {
        // todo 加载更多 gettingMore
        console.log('firstLoad', this.gettingMore);
        this.gettingMore = true;
        this.page++;
        console.log('getMore', this.gettingMore);

        this.$UserReq.getWithdrawHistory(
          {
            page: this.page,
            size: '10'
          }).then(
          (res) => {
            console.log('getWithdrawHistory', res);
            this.resp.historyItems.push(...res.data);
            this.gettingMore = false;
            console.log('getMore', this.gettingMore);
            if (res.data.length < 10) {
              this.noMoreData = true;
            }
          }, () => {
            this.gettingMore = false;
          }
        );
      },
      handleItemClick(item) {
        console.log(item.withdrawDetail, 'ITEM');
        // item.withdrawDetail
        this.$router.push({name: 'withdrawDetail', query: {msg: JSON.stringify(item.withdrawDetail)}});
      },
      getDate(date) {
        console.log(date);
        // todo 获取选中时间
      },
      firstLoad() {
        this.loading = true;
        this.gettingMore = true;

        this.$UserReq.getWithdrawHistory(
          {
            page: this.page,
            size: '10'
          }).then(
          (res) => {
            console.log('getWithdrawHistory=first', res);
            this.resp.historyItems = res.data;
            this.loading = false;
            this.gettingMore = false;
            if (res.data.length < 10) {
              this.noMoreData = true;
            }
          }, () => {
            this.loading = false;
            this.gettingMore = false;
          }
        );
      }
    },
    computed: {
    },
    watch: {
      // 监听具体数据变化，并做相应的处理
    },
    created() {
      this.firstLoad();
    }
  };
</script>

<style lang="stylus" rel="stylesheet/stylus" scoped>
  @import "../../assets/stylus/main.styl";
  .flex-r
    flex-x()

  .flex-c
    flex-y()

  .center
    flex-center()

  .divider
    divider()

  .space
    space()

  .layout
    flex-y()

  .header
    position fixed
    background-color bk-color
    display flex
    flex-direction row
    align-items center
    justify-content center
    width 100vw
    height 12vw
    top 0 /*当页面有滚动条时，position fixed 若不设置div位置会消失*/

  .time
    word-big()

  .history
    word-vw(14px, third-ash)
    margin-top 6px

  .icon
    width cell-icon-width
    margin-right cell-margin

  .list-view
    margin-top 12vw

  .mp-title
    height cell-height
    flex-center()

  .row
    display flex
    flex-direction row
    justify-content flex-start
    align-items center
    width 100vw
    box-sizing border-box
    padding-left 10px

  .cell
    flex-center()
    height vw(30)
    width vw(90)
    border-radius 5px
    background-color white
    word-big()
    border-radius(4vw)

  .cell-primary
    color white
    background gradient-color

  .mp-footer
    height cell-height
    flex-center()

  .empty-txt
    word-vw(12, third-ash);
    flex-center();
    margin-top 10px
    margin-bottom: 30vw;

</style>
